import React, { Component } from 'react'
import { Steps } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
const { Step } = Steps
export default class MySteps extends Component{
  state = {
    current1: 0
  }
  onChange1 = current => {
    this.setState({ current1: current })
  }
  render() {
    console.log(this.state)
    return (
      <>
        <div className="box">
          <div className="box-header">base</div>
          <div className="box-body">
            <div className="box-title">横向</div>
            <div className="box-content">
              <Steps current={1}>
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中" icon={<LoadingOutlined />}></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
            <div className="box-title">纵向</div>
            <div className="box-content">
              <Steps current={1} direction="vertical">
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中" icon={<LoadingOutlined />}></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
            <div className="box-title">状态</div>
            <div className="box-content">
              <Steps current={1} status="error">
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中" icon={<LoadingOutlined />}></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
            <div className="box-title">点状</div>
            <div className="box-content">
              <Steps current={0} progressDot status="error">
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中" icon={<LoadingOutlined />}></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
            <div className="box-title">可点击</div>
            <div className="box-content">
              <Steps onChange={this.onChange1} current={this.state.current1}>
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中" icon={<LoadingOutlined />}></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
            <div className="box-title">percent</div>
            <div className="box-content">
              <Steps current={0} percent={65}>
                <Step title="开始" description="准备开始"></Step>
                <Step title="进行中" subTitle="8:00" description="正在进行中"></Step>
                <Step title="结束" description="已经结束"></Step>
              </Steps>
            </div>
          </div>
          <div className="box-footer warning">
            设置onChange，step变成可点击
          </div>
        </div>
      </>
    )
  }
}